<!-- 描述参数 -->
<script setup lang="ts">
import type { TableColumnCtx } from "element-plus"
import { getEntityDetailInfo } from "@@/apis/scn"
import { ElMessage } from "element-plus"
import { ref } from "vue"

interface DescriptionItem {
  name: string
  value: any
}

interface Props {
  id: string
}

const props = defineProps<Props>()

// 状态和引用
const dialogVisible = ref(false)
const detail = ref<Record<string, any>>({})
const activeTab = ref("")
const tableData = ref<DescriptionItem[]>([])

// 表格列定义
const columns = [
  {
    label: "序号",
    width: 60,
    type: "index"
  },
  {
    prop: "name",
    label: "参数",
    minWidth: 150,
    showOverflowTooltip: true
  },
  {
    prop: "value",
    label: "值",
    minWidth: 200,
    showOverflowTooltip: true
  }
]

// 处理列宽调整
function handleHeaderDragend(newWidth: number, column: TableColumnCtx<DescriptionItem>) {
  column.width = newWidth
}

// 处理标签页切换
function handleTabChange(tab: string) {
  activeTab.value = tab
  tableData.value = []

  if (!detail.value || !detail.value[tab]) return

  const columns = Object.keys(detail.value[tab])

  if (columns && columns.length > 0) {
    columns.forEach((item) => {
      const value = detail.value[tab][item]
      tableData.value.push({
        name: item,
        value: value !== undefined ? value : ""
      })
    })
  }
}

// 获取实体详情
async function handleDetail() {
  if (!props.id) return null

  try {
    const { data } = await getEntityDetailInfo(props.id)

    if (data && data.detail) {
      detail.value = data.detail
      const tabs = Object.keys(detail.value)

      if (tabs.length > 0) {
        activeTab.value = tabs[0]
        handleTabChange(activeTab.value)
      }

      return data.detail
    }

    return null
  } catch (error) {
    console.error("获取实体详情失败:", error)
    ElMessage.error("获取实体详情失败")
    return null
  }
}

// 显示对话框
async function handleShowDialog() {
  await handleDetail()
  dialogVisible.value = true
}

// 关闭对话框
function handleCancel() {
  dialogVisible.value = false
}

// 暴露方法给父组件
defineExpose({
  handleShowDialog
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="描述参数"
    width="800px"
    :close-on-click-modal="false"
    class="description-dialog"
  >
    <el-tabs v-model="activeTab" @tab-change="handleTabChange" type="border-card">
      <el-tab-pane
        v-for="tab in Object.keys(detail)"
        :key="tab"
        :label="tab"
        :name="tab"
      >
        <el-table
          :data="tableData"
          border
          size="small"
          max-height="400"
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column
            prop="name"
            label="参数"
            min-width="150"
            show-overflow-tooltip
            resizable
            @header-dragend="handleHeaderDragend"
          />
          <el-table-column
            prop="value"
            label="值"
            min-width="200"
            show-overflow-tooltip
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.description-dialog {
  .el-dialog__header {
    margin-right: 0;
    padding: 15px 20px;
    border-bottom: 1px solid #e4e7ed;
  }

  .el-dialog__body {
    padding: 15px;
  }

  .el-tabs__header {
    margin-bottom: 15px;
  }

  .el-table {
    margin-bottom: 10px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
